<template>
 <el-container>
   <el-header height="80px" style="background-color: white">
     <div style="width: 1200px;margin: 0 auto">
       <el-row>
         <el-col :span="6">
           <router-link to="/">
             <img src="/imgs/icon.png" style="width: 200px">
           </router-link>
         </el-col>
         <el-col :span="10">
            <el-menu mode="horizontal" router active-text-color="orang">
              <el-menu-item index="/">首页</el-menu-item>
              <el-menu-item index="/list?type=1">食谱</el-menu-item>
              <el-menu-item index="/list?type=2">视频</el-menu-item>
              <el-menu-item index="/list?type=3">资讯</el-menu-item>
            </el-menu>
         </el-col>
         <el-col :span="6">
            <el-input v-model="wd" style="position: relative;top: 15px" placeholder="请输入搜索的关键字">
              <template #append>
                <el-button :icon="Search" @click="search()" />
              </template>
            </el-input>
         </el-col>
         <el-col :span="2">
<!--           没有登录的情况-->
           <el-popover v-if="user==null"
               placement="top-start"
               title="欢迎来到烘焙坊!"
               :width="200"
               trigger="hover"
           >
             <template #reference>
               <el-icon :size="30" style="position: relative;top: 15px"><User/></el-icon>
             </template>
             <el-button type="info" @click="router.push('/reg')">注册</el-button>
             <el-button type="warning" @click="router.push('/login')">登录</el-button>
           </el-popover>
<!--           登录的情况-->
           <el-popover v-else
               placement="top-start"
               title="欢迎来到烘焙坊!"
               :width="200"
               trigger="hover"
           >
             <template #reference>
               <el-icon :size="30" style="position: relative;top: 15px"><User/></el-icon>
             </template>
<!--              显示头像的组件-->
             <div style="text-align: center">
               <el-avatar :src="'http://localhost:8080'+user.imgUrl"></el-avatar><br>
               <el-button type="info" size="small" @click="router.push('/personal')">个人中心</el-button>
               <el-button type="warning" size="small" @click="logout()">退出登录</el-button>
               <el-button v-if="user.isAdmin==1"  size="small" type="danger" @click="router.push('/admin')">后台管理页面</el-button>
             </div>

           </el-popover>
         </el-col>
       </el-row>
     </div>
   </el-header>

   <el-main>
     <router-view/>
   </el-main>

   <el-footer style="background-color: black; height: 280px;padding: 50px 0">
     <div style="width: 1200px;margin: 0 auto;color: #666;text-align: center">
        <el-row>
          <el-col :span="8">
            <img src="/imgs/icon.png">
            <p>教程灵感就看烘焙坊</p>
            <p>烘焙行业网络社区平台</p>
            <p>全国百城上千个职位等你来</p>
          </el-col>
          <el-col :span="8" id="footer-center">
              <el-row >
                <el-col :span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p><p>烘焙食谱</p><p>分类信息</p><p>求职招聘</p><p>社区交流</p>
                </el-col>
                <el-col :span="8">
                  <h3>服务与支持</h3>
                  <p>联系我们</p><p>广告投放</p><p>用户协议</p><p>友情链接</p><p>在线反馈</p>
                </el-col>
                <el-col :span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p><p>手机版</p><p>小黑屋</p>
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="8">
            <p style="font-size: 60px;margin: 0">
              <span style="color: orange">烘焙</span>坊
            </p>
            <p>烘焙行业社区平台</p>
          </el-col>
        </el-row>
     </div>
   </el-footer>
 </el-container>
</template>

<script setup>

import {ref} from "vue";
import{
  Search
} from '@element-plus/icons-vue'

import router from "@/router";
const wd=ref('');
const search=()=>{
  //跳转到列表页面
  router.push('/list?wd='+wd.value)
}

const user=ref(getUser())

const logout=()=>{
  if (confirm("请输入退出登录吗")){
    localStorage.clear();
    user.value=null;
  }

}


</script>
<style>
 footer h3{color: white}
 #footer-center p{margin: 5px 0}
 /*.el-main {
   --el-main-padding: 0 !important;
   background-color: white;
 }*/
</style>
